<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>jQuery Maps</title>
		<style type="text/css">
			v\:* { behavior:url(#default#VML);}
		</style>
		<!--
		<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAApCYnM8S-TSRBhQk16Ynr4BQsdKsyZnhdiIFVYLirST5eeJJrrBSLEOe2KFlwraCMKFXFl41xy8sfMw" type="text/javascript"></script>
		<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAApCYnM8S-TSRBhQk16Ynr4BQsdKsyZnhdiIFVYLirST5eeJJrrBSLEOe2KFlwraCMKFXFl41xy8sfMw" type="text/javascript"></script>
		-->
		<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.7&appid=ZYUn2tzV34GgW8J17pi3Gs_HoHGntvd.3km8IQmp.sLKNa8GYwVKyei4Ld6VonBeHHNqBNL9EXA-"></script>
		<script src="jquery.js" type="text/javascript"></script>
		<script src="chili-1.7.pack.js" type="text/javascript"></script>
		<script src="jquery.jmaps.js" type="text/javascript"></script>

		<script type="text/javascript">
			$('document').ready(function(){
				$("#jmap").jmap({provider: "yahoo"});
				
				/*
				var geoPointArray = [];
				geoPointArray.push (new YGeoPoint(55.958858,-3.162302));
				geoPointArray.push (new YGeoPoint(56.958858,-3.162302));
				geoPointArray.push (new YGeoPoint(57.958858,-3.162302));
				var polyline = new YPolyline(geoPointArray);
				
				$('#jmap').addPoly(polyline);
				*/
			$("a.showcode").bind("click", function(){
				var showdiv = $(this).attr("href");
				$(showdiv).toggle("fast");
				return false;
			});
		});
	</script>
	<style type="text/css">
	*, body { margin: 0, 10px; padding: 0; }
	p, ul { margin:10px; padding:10px;}
	pre {width: 80%; text-align:left; margin:0 auto; padding:1px; overflow:hide}
	.jscom, .mix htcom   { color: #4040c2; }
	.com      { color: green; }
	.regexp   { color: maroon; }
	.string   { color: teal; }
	.keywords { color: blue; }
	.global   { color: #008; }
	.numbers  { color: #880; }
	.comm     { color: green; }
	.tag      { color: blue; }
	.entity   { color: blue; }
	.string   { color: teal; }
	.aname    { color: maroon; }
	.avalue   { color: maroon; }
	.jquery   { color: #00a; }
	.plugin   { color: red; }
	</style>
	</head>
	<body>
	
	
	<div style="width:100%; height:131px; background:url('images/header.png') #000 no-repeat;" /><span style="float:right;color:#fff;">jQuery Maplet is a plugin for jQuery that provide easy-to-use Google Map functionality.</span></div>
	<p>
	<strong>A jQuery Plugin for Google Maps</strong><br />
	Author: <span class="hcard"><span class="fn">Tane Piper</span></span> (digitalspaghetti at gmail dot com).  With special thanks Dave Cardwell (who helped on getting this plugin to work).<br />
	Licensed under the <a href="http://www.opensource.org/licenses/mit-license.php" rel="licence">MIT License</a>.<br />
	</p>
	
	<a name="demo"><h2>Demos</h2></a>
	<div id="jmap" style="float:left;width:800px;height:400px;"></div>

	<div style="float:left;width:15%">
		<strong>Enter an address, zip or postcode below to find the location.</strong>
		<input type="text" id="Address" /><br />
		<input type="submit" value="Find Address" id="findaddress" />
		<br />
		From: <input type="text" id="from" /><br />
		To: <input type="text" id="to" /><br />
		<input type="submit" value="Get Directions" id="getDirections" />
		<div id="myDirections" style="max-height:250px; overflow:auto;"></div>
	</div>
	<br style="clear:both;" />
	</body>
</html>
